<template>
	<view style="background-color: #fff;width: 100%;">
		<view class="search">
			<view class="search_title">bawei社区团购</view>
			<view class="search_input">
			</view>
		</view>
		<view class="shopget">
			<view class="shopgets">
				<view class="shopgets_img">
					<image src="/static/images/shop.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="shopgets_title">
					<view class="shopgets_address">自提点：诚信超市</view>
					<view class="shopgets_time">今天下单，明天16点自提</view>
				</view>
				<view class="shopgets_huan" @click="topersoncenter()">
					进入个人中心
				</view>
			</view>
		</view>
		<!-- 分享 -->
		<view style="width: 100vw;height: 20vh;display: flex;">
			<view style="width: 45vw;margin-left: 3vw;height: 20vh;">
				<image src="/static/images/Lfenxinag.png" style="width: 45vw;height: 15vh;margin-left: 2vh;" mode="">
				</image>
			</view>
			<view style="width: 45vw;margin-left: 3vw;height: 20vh;">
				<image src="/static/images/Lfenxinag.png" style="width: 45vw;height: 15vh;margin-left: 2vh;" mode="">
				</image>
			</view>
		</view>

		<!-- 布局 -->
		<view style="width: 100vw;height: 25vh;margin-top: 2vh;display: flex;flex-wrap: wrap;">
			<view style="width: 48vw;margin-left: 2vw;height: 25vh;" v-for="(item,index) in shoplist" :key="index"
				@click="tzpt">
				<view style="width: 48vw;height: 14vh;">
					<image :src="item.img" style="width: 48vw;height: 14vh;" mode=""></image>
				</view>
				<view style="width: 48vw;font-size: 0.9rem;font-weight: bold;">{{item.name}}</view>
				<view style="font-size: 0.5rem;color: #999;">{{item.title}}</view>
				<view style="width: 48vw;display: flex;font-size: 0.5rem;color: #999;">
					<view>以抢购{{item.num}}件</view>
				</view>
				<view style="width: 48vw;display: flex;">
					<view style="font-size: 0.8rem;color: red;font-weight: bold;">￥{{item.price}}</view>
					<view
						style="background-color: #FF6600;color: #fff;font-size: 0.8rem;width: 8vw;text-align: center;margin-left: 10vw;">
						分享</view>
				</view>
			</view>


		</view>
		<!-- <view class="container">

			<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。
			</view>
			<text class="intro">详见：</text>
			<uni-link :href="href" :text="href"></uni-link>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shoplist: [{
						img: '../../static/images/shoplist1.png',
						name: '美国提子500g',
						title: '鲜甜多汁，口口满足过瘾',
						num: 1,
						nums: 182,
						price: '19.00',
						prices: '0.00'
					},
					{
						img: '../../static/images/shoplist1.png',
						name: '美国提子500g',
						title: '鲜甜多汁，口口满足过瘾',
						num: 1,
						nums: 182,
						price: '19.00',
						prices: '0.00'
					},
					{
						img: '../../static/images/shoplist1.png',
						name: '美国提子500g',
						title: '鲜甜多汁，口口满足过瘾',
						num: 1,
						nums: 182,
						price: '19.00',
						prices: '0.00'
					},
					{
						img: '../../static/images/shoplist1.png',
						name: '美国提子500g',
						title: '鲜甜多汁，口口满足过瘾',
						num: 1,
						nums: 182,
						price: '19.00',
						prices: '0.00'
					},
					{
						img: '../../static/images/shoplist1.png',
						name: '美国提子500g',
						title: '鲜甜多汁，口口满足过瘾',
						num: 1,
						nums: 182,
						price: '19.00',
						prices: '0.00'
					},
					{
						img: '../../static/images/shoplist1.png',
						name: '美国提子500g',
						title: '鲜甜多汁，口口满足过瘾',
						num: 1,
						nums: 182,
						price: '19.00',
						prices: '0.00'
					},
					{
						img: '../../static/images/shoplist1.png',
						name: '美国提子500g',
						title: '鲜甜多汁，口口满足过瘾',
						num: 1,
						nums: 182,
						price: '19.00',
						prices: '0.00'
					},
					{
						img: '../../static/images/shoplist1.png',
						name: '美国提子500g',
						title: '鲜甜多汁，口口满足过瘾',
						num: 1,
						nums: 182,
						price: '19.00',
						prices: '0.00'
					},
					{
						img: '../../static/images/shoplist1.png',
						name: '美国提子500g',
						title: '鲜甜多汁，口口满足过瘾',
						num: 1,
						nums: 182,
						price: '19.00',
						prices: '0.00'
					}
				],
			}
		},
		methods: {

			tzpt() {
				uni.navigateTo({
					url: '../CollageRecord'
				})
			},
			topersoncenter(){
				uni.navigateTo({
					url:'../PeronCenter'
				})
			}
		}
	}
</script>


<style scoped>
	.search {
		width: 100%;
		height: 50px;
		background-color: #7F89EE;
		display: flex;
		flex-wrap: nowrap;
	}

	.search_title {
		width: 40%;
		height: 50px;
		line-height: 50px;
		color: #fff;
		font-weight: 600;
		font-size: 18px;
		padding-left: 10px;
	}


	.search_icon {
		margin-top: 4px;
		margin-left: 6px;
	}

	.search_inputs {
		margin-top: 3px;
		margin-left: 10px;
	}

	.shopget {
		width: 100%;
		height: 40px;
	}

	.shopgets {
		width: 96%;
		height: 36px;
		margin-left: 2%;
		display: flex;
		flex-wrap: nowrap;
	}

	.shopgets_img {
		width: 10%;
		height: 30px;
		margin-left: 5px;
		margin-top: 3px;
	}

	.shopgets_title {
		width: 35%;
		height: 36px;
		margin-left: 5%;
	}

	.shopgets_address {
		width: 100%;
		height: 18px;
		line-height: 18px;
		font-size: 12px;
	}

	.shopgets_time {
		width: 100%;
		height: 18px;
		line-height: 18px;
		font-size: 12px;
		color: red;
	}

	.shopgets_huan {
		width: 20%;
		height: 36px;
		line-height: 18px;
		font-size: 13px;
		color: blue;
	}

	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>
